{extends file="../acp.html"}

{block name="title"}{$head_title}{/block}
{block name="content"}
<form name="form1" id="form1" action="" method="post" onsubmit="return beforeSubmit();">
<div class="formitems inline">  
    <label class="fi-name">显示在线客服：</label>  
    <div class="form-controls">  
        <div class="radio-group">  
            <label><input type="radio" name="online_display" value="block"{if $online_display eq 'block'} checked="checked"{/if}>开启</label>  
            <label><input type="radio" name="online_display" value="none"{if $online_display neq 'block'} checked="checked"{/if}>关闭</label>   
        </div>  
		<a href="javascript:;" class="btn btn-blue" id="set"><i class="gicon-edit white"></i>设置</a>
    </div>  
</div> 
{foreach from=$customer_service_online_list_group item=this key=k}
<div class="t-qq">
	<div class="t-qq-tit">{if $k eq 1}QQ{elseif $k eq 2}旺旺{/if}客服：</div>
    <div class="t-qq-con">
        <div class="tablesWrap">   
            <table class="wxtables">  
                <colgroup>  
                <col width="40%">  
                <col width="40%"> 
                <col width="20%">  
                </colgroup>  
                <thead>  
                    <tr>  
                        <td>{if $k eq 1}QQ{elseif $k eq 2}旺旺{/if}号码</td>  
                        <td>呢称</td> 
                        <td>操作</td>  
                    </tr>  
                </thead>  
                <tbody>  
				{foreach from=$this item=_this key=_k}
                    <tr data-type="{$k}" data-id="{$_k}">  
                        <td>
							<input type="text" name="data[{$k}][{$_k}][account]" placeholder="" class="small account" value="{$_this.account}">  
							<span class="fi-help-text hide"></span>
						</td>  
                        <td>
							<input type="text" name="data[{$k}][{$_k}][nick]" placeholder="" class="small nick" value="{$_this.nick}">  
							<span class="fi-help-text hide"></span>
						</td> 
                    {if $_this}
						<td>    
                            <a href="javascript:;" class="btn{if $_this} del{/if}"{if $_this} data-id="{$_this.customer_service_online_id}"{/if} title="删除"><i class="gicon-trash black"></i>删除</a>   
                        </td>  
					{/if}
						<input type="hidden" name="data[{$k}][{$_k}][customer_service_online_id]" value="{$_this.customer_service_online_id}" />
                    </tr>  
				{/foreach}
                </tbody>  
            </table>  
            <!-- end wxtables -->  
            <div class="tables-btmctrl clearfix">  
                <div class="fl">  
                    <a href="javascript:;" class="btn btn-blue t-zj">增加一行</a>  
                </div>  
                <div class="fr"></div>  
            </div>  
            <!-- end tables-btmctrl -->  
        </div>  
		<!-- end tablesWrap -->     
    </div>
</div>
{/foreach}
<div class="t-qq" style="margin-left:165px;">
	<input type="hidden" name="act" value="submit" />
	<button type="submit" class="btn btn-blue"><i class="gicon-check white"></i>保存</button> 
    <button type="reset" class="btn btn-blue"><i class="gicon-repeat white"></i>重置</button> 
</div>
</form>
{/block} 

{block name="js"}
{literal}
<script type="text/javascript">
$(function(){
	$(".t-zj").click(function(){
		var html=$(this).parents(".tablesWrap").find("tbody tr:last").clone();
		var _type = html.data('type');
		var _id = html.data('id');
		var _name = '';
		
		_id++;
		html.attr('data-id', _id);
		_name = "data[" + _type + "][" + _id + "][account]";
		html.find('.account').attr('name', _name);
		_name = "data[" + _type + "][" + _id + "][nick]";
		html.find('.nick').attr('name', _name);
		html.find('input[type="text"]').removeAttr('value');
		html.find('input[type="hidden"]').removeAttr('name').removeAttr('value');
		html.find('a').parent().remove();
		$(this).parents(".tablesWrap").find("tbody").append(html);
	});
	
	$('#set').on('click', function(){
		var _checked = $(this).parent().find(':checked').val();
		$.ajax({
			url: '/AcpConfigAjax/set_customer_service_online',
			data: {online_display: _checked},
			dataType: 'json',
			beforeSend: function(){
				$.jPops.showLoading();
			},
			success: function(data){
				$.jPops.hideLoading();
				$.jPops.alert({
					title:"提示",
					content:data.msg,
					okBtnTxt:"确定",
					callback:function(){
						return true;
					}
				});
			}
		});
	});
	
	$('.del').on('click', function(){
		var _this = this;
		$.jPops.confirm({
			title:"提示",
			content:'您确定要删除该客服吗？',
			okBtnTxt:"确定",
			cancelBtnTxt:"取消",
			callback:function(r){
				if(r){
					$.ajax({
						url: '/AcpConfigAjax/del_customer_service_online',
						data: {id: $(_this).data('id')},
						dataType: 'json',
						beforeSend: function(){
							$.jPops.showLoading();
						},
						success: function(data){
							$.jPops.hideLoading();
							if(data.status === 1){
								$(_this).parents('tr').fadeOut(400, function(){
									$(this).remove();
								});
							}
							$.jPops.alert({
								title:"提示",
								content:data.msg,
								okBtnTxt:"确定",
								callback:function(){
									return true;
								}
							});
							
						}
					});
				}
				return true;
			}
		});
	});
})

function beforeSubmit(){
	var _account = $('.account');
	var _nick = $('.nick');
	var _this = null;
	
	for(var i in _account){
		_this = _account.eq(i);
		if('' == _this.val()){
			$(_this).focus().addClass('error').next().text('请输入客服帐号！').removeClass('hide').addClass('error');
			return false;
		} else {
			$(_this).removeClass('error').next().removeClass('error').addClass('hide');
		}
	}
	for(var j in _nick){
		_this = _nick.eq(j);
		if('' == _this.val()){
			$(_this).focus().addClass('error').next().text('请输入客服昵称！').removeClass('hide').addClass('error');
			return false;
		} else {
			$(_this).removeClass('error').next().removeClass('error').addClass('hide');
		}
	}
	return true;
}
</script>
{/literal}
{/block} 

{block name="css"}
<link rel="stylesheet" href="/Public/Css/acp/AcpConfig/set_service_account.css" type="text/css" />
{/block}
